import {Col, Form, Input, message, Modal, Row, Spin,Select,Tag,DatePicker} from "antd";
import React from "react";
import axios from "../../../../components/service/request";


const EditModal  = ({ isModalVisible, cancelModal, value, reload, baseUir }) => {

    //确认框的加载状态、旋转加载的状态、模块选项的值和模块选项的更新函数 定义初始状态
    
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [spinLoading, setSpinLoading] = React.useState(false);
    const [title, setTitle] = React.useState("新增设备");
    const [EquclassOptions, setEquclassOptions] = React.useState("新增设备");
    const [form] = Form.useForm();
    let Option = Select.Option;

    React.useEffect(() => {
        if (isModalVisible) {
            setSpinLoading(true)
            axios.get('/admin/equipment/equ/getClassName').then(res => {
                let options = []
                if (res.data) {
                    options.push(res.data.map(r => {
                        return <Option value={r.id}>{r.name}</Option>
                    }))
                }
                setEquclassOptions(options)
                setSpinLoading(false)
            }).catch(err => {
                message.error(err)
            })
            if (value) {
                setTitle("设备信息")
                form.setFieldsValue({
                    id: value.id,
                    equCode:value.equCode,
                    name: value.name,
                    classId: value.classId,
                    manufacturer: value.manufacturer,
                    date:value.date.date,
                    place: value.place,
                    state: value.state,
                    specification: value.specification,
                    tparameter: value.tparameter,
                    cparameter: value.cparameter,              
                    notes: value.notes,
                });
            }
            setSpinLoading(false)
        }
    }, [form, isModalVisible, value]);


    //编辑时 保存按钮方法
    const handleOk = () => {
        setConfirmLoading(true)
        form.validateFields()
            .then((values) => {
                form.resetFields();
                axios.post(baseUir+"/save", values).then(res => {
                    if (res.code === 200) {
                        message.info(res.msg)
                        cancelModal()
                        reload()
                    }  else {
                        message.info(res.msg)
                    }
                })
            })
        setConfirmLoading(false)
    }
    //编辑时取消按钮方法
    const handleCancel = () => {
        form.resetFields()
        cancelModal()
    }
    return (
        <Modal title={title}
               visible={isModalVisible}
               onOk={handleOk}
               onCancel={handleCancel}
               okText={'保存'}
               confirmLoading={confirmLoading}                                                                                       
               cancelText={'取消'}
               width={800}   
        >
            <Spin spinning={spinLoading}>
                <Form form={form}
                      labelAlign={'right'}
                      layout={'vertical'}
                >
                    <Form.Item name="id" hidden={true}>
                        <Input/>
                    </Form.Item>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="equCode" label="设备编号"
                                rules={[
                                    {
                                        required: true,
                                        message: "必须填写设备编号！"
                                    }
                                ]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="name" label="设备名称"
                                rules={[
                                    {
                                        required: true,
                                        message: "必须填写设备名称！"
                                    }]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="classId" label="设备类型"
                                rules={[
                                    {
                                        required: true,
                                        message: "必须选择设备类型！"
                                    }]}>
                                {
                                       <Select
                                       placeholder="请选择设备类型"
                                       style={{width: '100%'}}
                                       allowClear
                                   >
                                    {EquclassOptions}
                                   </Select>
                                }
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="manufacturer" label="生产厂家"
                                rules={[
                                    {
                                        // required: true,
                                        // message: "必须填写生产厂家！"
                                    }]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="date" label="入库日期"
                            // rules={[
                            //         {
                            //             required: true,
                            //             message: "必须填写入库日期！"
                            //         }]}
                            >                               
                                    <DatePicker
                                        style={{ width: '100%' }}
                                        placeholder="请选择"/>                                           
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="place" label="设备地址"
                                rules={[
                                    {
                               
                                        required: true,
                                        message: "必须填写设备地址！"
                                    }]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="state" label="设备状态"
                                rules={[
                                    {
                                        required: true,
                                        message: "必须选择设备状态！"
                                    }]}>
                                 {                                   
                                        <Select
                                        placeholder="请选择设备状态"
                                        style={{width: '100%'}}
                                        allowClear
                                        optionLabelProp="label"
                                    >
                                        <option value="在库中" label="在库中" ><Tag color='success'>在库中</Tag></option>
                                        <option value="已借出" label="已借出" ><Tag color="default">已借出</Tag></option>
                                        <option value="维修中" label="维修中" ><Tag color="processing">维修中</Tag></option>
                                    </Select>                                      
                                 }
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="specification" label="规格型号"
                                rules={[
                                    {
                                        required: true,
                                        message: "必须填写规格型号！"
                                    }]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                    </Row>                  
                    <Row gutter={16}>
                    <Col span={12}>
                            <Form.Item name="tparameter" label="技术参数"
                                rules={[
                                    {
                                        //选填项
                                        // required: true,
                                        // message: "必须填写技术参数！"
                                    }]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="cparameter" label="标定参数"
                                rules={[
                                    {
                                    }]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={16}>
                            <Form.Item name="notes" label="备注">
                                {
                                    <Input/>
                                }
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Spin>

        </Modal>
    );

}

export default EditModal;
